<template>
  <div>
    <a-form
      :form="form"
      @submit.prevent="onSubmit"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
    >
      <a-form-item label="巡检名称">
        <a-input
          placeholder="巡检名称"
          v-decorator="[
            'name',
            { rules: [{ required: true, message: '请输入巡检名称' }] },
          ]"
        />
      </a-form-item>
      <a-form-item label="价格">
        <a-input
          placeholder="价格"
          v-decorator="[
            'price',
            {
              rules: [
                { required: true, message: '请输入价格' },
                {
                  validator: (rule, val, callback) => {
                    if (isNaN(Number(val))) {
                      callback('请输入数字');
                    }
                    if (val < 0) {
                      callback('请勿填入负数');
                    }
                    callback();
                  },
                },
              ],
            },
          ]"
        />
      </a-form-item>
      <a-form-item label="巡检类型">
        <a-select
          placeholder="请选择巡检类型"
          v-decorator="[
            'type',
            { rules: [{ required: true, message: '请选择巡检类型' }] },
          ]"
        >
          <a-select-option v-for="v in cateList" :key="v.id" :value="v.id">
            {{ v.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="最小单位">
        <a-input
          placeholder="请输入最小单位"
          v-decorator="[
            'unit',
            {
              rules: [
                { required: true, message: '请输入最小单位' },
                {
                  validator: (rule, val, callback) => {
                    if (isNaN(Number(val))) {
                      callback('请输入数字');
                    }
                    if (val <= 0) {
                      callback('请输入大于0的数字');
                    }
                    callback();
                  },
                },
              ],
            },
          ]"
        />
      </a-form-item>
      <a-form-item label="图片">
        <div class="img-wrap">
          <div class="upload-show">
            <img
              v-if="imgUrl"
              :src="imgUrl"
              width="100"
              height="100"
              style="display: block"
            />
          </div>
          <div class="upload-text">
            <a-upload
              name="file"
              :showUploadList="false"
              :multiple="false"
              :customRequest="this.handleUploadImage"
            >
              <span>上传</span>
            </a-upload>
          </div>
        </div>
      </a-form-item>
      <a-form-item label="视频">
        <div class="img-wrap">
          <div class="upload-show">
            <video
              v-if="url"
              :src="url"
              width="100"
              height="100"
              controls="controls"
              style="display: block"
            >
              您的浏览器不支持 video 标签。
            </video>
          </div>
          <div class="upload-text">
            <a-upload
              name="file"
              :showUploadList="false"
              :multiple="false"
              :customRequest="this.handleUploadVideo"
            >
              <span>上传</span>
            </a-upload>
          </div>
        </div>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import config from "@/api/config";

export default {
  name: "check-create",
  data() {
    return {
    control:false,
      form: this.$form.createForm(this),
      cateList: [
        { id: 1, label: "点(核算单位：每点*8h)" },
        { id: 2, label: "线(核算单位：公里)" },
        { id: 3, label: "面(核算单位：平方公里)" },
      ],
      labelCol: { lg: { span: 7 }, sm: { span: 7 } },
      wrapperCol: { lg: { span: 10 }, sm: { span: 17 } },
      imgUrl: "",
      url: "",
    };
  },
  methods: {
    beforeUpload(file) {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.error("You can only upload JPG file!");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("图片大小不能超过2MB!");
      }
      return isJpgOrPng && isLt2M;
    },
    onSubmit(form) {
      this.form.validateFields(async (err, values) => {
        if (!err) {
          console.log("values:", values, this.url);
          values.video = this.url;
          values.image = this.imgUrl;
          let { status, message } = await this.http(
            "post",
            "/inspection/create",
            values
          );
          if (status === 1) {
            this.$message.success("添加成功", 1);
            this.$emit("close");
          } else {
            this.$message.error(message, 1);
          }
        }
      });
    },
    handleUploadImage(args) {
      let params = new FormData();
      params.append("uploadFile", args.file);
      this.http("post", config.uploadURL, params)
        .then((resp) => {
          let {
            data: { filePath },
          } = resp;
          console.log("resp:", filePath);
          this.imgUrl = filePath;
          return args.onSuccess({ code: 200 }, args.file);
        })
        .catch((e) => console.error(e));
    },

    handleUploadVideo(args) {
      let params = new FormData();
      params.append("uploadFile", args.file);
      this.http("post", config.uploadURL, params)
        .then((resp) => {
          let {
            data: { filePath },
          } = resp;
          console.log("resp:", filePath);
          this.url = filePath;
          return args.onSuccess({ code: 200 }, args.file);
        })
        .catch((e) => console.error(e));
    },
  },
  mounted() {},
  
};
</script>

<style lang="scss" scoped>
</style>